<template>
  <div class="accelerator-container">
    <div class="header">
      <div>
        <el-button type="text" icon="el-icon-arrow-left" style="color: #F4A780; font-size: 16px"
                   @click="goBack"></el-button>
      </div>
      <div class="right">
        <el-button type="text" icon="el-icon-more"></el-button>
        <el-button type="text" icon="el-icon-s-help"></el-button>
      </div>
    </div>
    <div class="showJs" @click="publishInfo">加速值明细</div>
    <div class="code">
      <h1>{{this.quickenPoint}}</h1>
      <h4>当前加速值</h4>
    </div>
    <el-tabs v-model="activeTab" class="tab-container">
      <el-tab-pane label="租房加速器" name="accelerator">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>直连加速</span>
            <span class="price">10加速值/个</span>
          </div>
          <div class="text item">
            <span>直接查看联系方式</span>
            <el-button type="primary" @click="connectBuy">立即获取</el-button>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>公众号广告</span>
            <span class="price">800加速值</span>
          </div>
          <div class="text item">
            <span>出租/求租信息推荐给公众号粉丝，提高曝光</span>
            <el-button type="primary" @click="gzh">立即获取</el-button>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>微博广告</span>
            <span class="price">1500加速值/10天</span>
          </div>
          <div class="text item">
            <span>官方微博（20W+粉）推荐您的出租/求租信息</span>
            <el-button type="primary" @click="wb">立即获取</el-button>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="获取加速值" name="getAccelerate">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>购买加速包</span>
          </div>
          <div class="text item">
            <span>直接购买加速包。购买越多越优惠</span>
            <el-button type="primary" @click="buyAcceleratePackage">去购买</el-button>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>好友助力加速</span>
          </div>
          <div class="text item">
            <span>邀请好友注册，可获得20加速值，多邀多得</span>
            <el-button type="primary" @click="inviteFriend">去邀请</el-button>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>注册实名</span>
          </div>
          <div class="text item">
            <span>实名后可得10加速值</span>
            <el-button type="primary" @click="bindPhone">去绑定</el-button>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>每日签到</span>
          </div>
          <div class="text item">
            <span>绑定手机号可得10加速值</span>
            <el-button type="primary" @click="signIn">去签到</el-button>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>发布信息</span>
          </div>
          <div class="text item">
            <span>发布一条信息可得20加速值</span>
            <el-button type="primary" @click="gRelease">去发布</el-button>
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
let url = 'http://localhost:9701/web/';
export default {
  data() {
    return {
      currentAccelerateValue: 0,
      activeTab: 'accelerator',
      currentUser: {
        activity: '',
        changedValue: '',
        uid: '',
        createTime: '',
        updateTime: '',
        status: '',
        accelerateValue: 0,
      },
      uid:'',
      quickenPoint:''
    };
  },
  created() {
    this.findUser();
  },
  methods: {
    gRelease() {
      this.$router.push('/release');
    },
    findUser() {
      this.axios.get(url+'user-account/getUserAccount').then(res=>{
         this.quickenPoint = res.data.data;
      })
    },
    gzh() {
      this.axios.post(url + 'charge-record/advertising', this.currentUser).then(res => {
        if (res.data.data != false) {
          this.$message({
            message: '加速成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: '加速失败',
            type: 'error'
          });
        }
        console.log(res.data)
      })
      this.findUser();
    },

    connectBuy() {
      this.axios.post(url + 'charge-record/connectWay', this.currentUser).then(res => {
        if (res.data.data != false) {
          this.$message({
            message: '加速成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: '加速失败',
            type: 'error'
          });
        }
        console.log(res.data)
      })
      this.findUser();
    },
    wb() {
      this.axios.post(url + 'charge-record/advertisingWeiBo', this.currentUser).then(res => {
        if (res.data.data != false) {
          this.$message({
            message: '加速成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: '加速失败',
            type: 'error'
          });
        }
      })
      this.findUser();
    },
    goBack() {
      this.$router.push('/')
    },
    buyAcceleratePackage() {
      this.$router.push('/accelerateBuy');
    },
    inviteFriend() {
      // 这里可以实现邀请好友的逻辑，例如跳转到邀请页面或调用后端接口
      this.$router.push('/accelerateHelp');
    },
    bindPhone() {
      // 这里可以实现绑定手机号的逻辑，例如跳转到绑定页面或调用后端接口
      this.$router.push('/accelerateBound');
    },
    signIn() {
      // 这里可以实现每日签到的逻辑，例如调用后端接口更新签到状态并增加加速值
      this.$router.push('/accelerateSign');
    },
    publishInfo() {
      // 这里可以实现发布信息的逻辑，例如跳转到发布页面或调用后端接口
      this.$router.push('/accelerateValue');
    },
  },
};
</script>

<style scoped>
.showJs {
  color: #F4A780;
  font-size: 12px;
  float: right;
  padding-right: 15px;
}

.accelerator-container {
  width: 390px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
}

.right {
  display: flex;
  border: 1px solid #F4A780;
  padding: 5px 5px;
  border-radius: 15px;
}

.right button {
  color: #F4A780;
  padding: 0 5px;
  font-size: 18px;
}

.tab-container {
  margin-bottom: 20px;
}

.box-card {
  margin-bottom: 15px;
  text-align: left;
}

.price {
  color: red;
  margin-left: 70px;
}

.text {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text span {
  font-size: 12px;
  display: inline-block;
}

.text button {
  background-color: white;
  color: black;
  border: 1px solid gray;
}
</style>